<template>
	<div class="tree">
		<alert ref="alert"></alert>
		<div class="orgDiv">
			<el-input placeholder="查找组织机构、部门" v-model="filterText" class="filter"></el-input>
			<el-tree :data="organizationArr" :props="defaultProps" node-key="id" accordion @node-click="handleNodeClick"  :filter-node-method="filterNode" ref="tree">
	      		<span class="custom-tree-node" slot-scope="{ node, data }">
	        		<span>{{ node.label }}</span>
	        		<span class="point" @click="newTree"><img src="../assets/qudaoImg/slhRow.png"/></span>
	      		</span>
	    	</el-tree>
		</div>
		<div class="orgManagerWrap" v-if="this.addOrgPage==true">
			<div class="bd_line">
				<span>组织名称:</span>
				<input type="text" placeholder="请输入组织名称" v-model="name">
			</div>
			<div class="bd_line" v-if="this.nowType=='edit'">
				<span>组织编号:</span>
				<em>{{serialNumber}}</em>
			</div>
			<div class="bd_line">
				<span>所在地区:</span>
				<el-cascader v-model="valueWrap" :options="cityArr" :props="optionProps" placeholder="选择地区" @change="cityArrChangeAdd"></el-cascader>
			</div>
			<div class="bd_line" style="height: 80px;">
				<span>组织描述:</span>
				<textarea placeholder="请输入更新内容..." v-model="describes" style="position: absolute;left: 112px;top: 0;"></textarea>
			</div>
			<div class="footerButton">
				<a @click="checkSave">保存</a>
				<a @click="cancel" class="cancel">取消</a>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../components/Alert.vue';
	export default{
		data(){
			return{
				filterText: '',
				dataId:'',
				organizationArr:[],
				defaultProps: {
          			children: 'childrenList',
          			label: 'name'
        		},
        	
        	
        		addOrgPage:false,
				nowType:'childAdd',
				cityArr:[],
				proviceid:'',
				cityid:'',
				regionid:'',
				optionProps: {
					value: 'id',
					label: 'name',
					children: 'list',
					checkStrictly: true
				},
				valueWrap:[],
				
				name:'',
				serialNumber:'',
				describes:'',
				proviceidWrap:'',
				cityidWrap:'',
				regionidWrap:'',
				dataId:'',
				transitionDataId:''
			}
		},
		methods:{
			getTableList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/getOrganizationInfo?"+'&rootcompanyid=1'+'&proviceid='+this.$parent.proviceid+'&cityid='+this.$parent.cityid+'&regionid='+this.$parent.regionid,
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.organizationArr = res.data.data;
						}
					}
				})
			},
	        filterNode(value, data) {
        		if (!value) return true;
       	 		return data.name.indexOf(value) !== -1;
      		},
      		cityArrChangeAdd(data){
				this.proviceid = data[0];
				if(data[1]!=undefined){
					this.cityid = data[1];
				}else{
					this.cityid = '';
				};
				if(data[2]!=undefined){
					this.regionid = data[2];
				}else{
					this.regionid = '';
				};
			},
			handleNodeClick(data){
        		this.dataId = data.id;
			},
			newTree(){
				this.addOrgPage=true;
			},
			add_type(){
				let s= {
					rootcompanyid:1,
					name:this.name,
					pid:this.pid,
					proviceid:this.proviceid,
					cityid:this.cityid,
					regionid:this.regionid,
					describes:this.describes
				};
				if(this.name==''){
					this.wrapClose = true;
					this.stateWrapText = '组织名称为空！';
				}else{
					this.$ajax({
						url: this.$root.jifuUrl + '/addOrganization',
						method: 'POST',
						data: this.qs.stringify(s),	
						success: res => {
							if(res.data.code == 200){
								this.addOrgPage = false;
								this.$rootFunction().addResSuccess();
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}
			},
			add_child_type(){
				let s= {
					rootcompanyid:1,
					name:this.name,
					pid:this.dataId,
					proviceid:this.proviceid,
					cityid:this.cityid,
					regionid:this.regionid,
					describes:this.describes
				};
				if(this.name==''){
					this.wrapClose = true;
					this.stateWrapText = '组织名称为空！';
				}else{
					this.$ajax({
						url: this.$root.jifuUrl + '/addOrganization',
						method: 'POST',
						data: this.qs.stringify(s),	
						success: res => {
							if(res.data.code == 200){
								this.addOrgPage = false;
								this.$rootFunction().addResSuccess();
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}
			},
			edit_type(){
				if(this.cityid==''){
					this.cityid=-1;
				};
				if(this.regionid==''){
					this.regionid=-1;
				};
				let s= {
					rootcompanyid:1,
					name:this.name,
					id:this.editId,
					pid:this.editPid,
					proviceid:this.proviceid,
					cityid:this.cityid,
					regionid:this.regionid,
					describes:this.describes
				};
				this.$ajax({
					url: this.$root.jifuUrl + '/updateOrganization',
					method: 'POST',
					data: this.qs.stringify(s),	
					success: res => {
						if(res.data.code == 200){
							this.addOrgPage = false;
							this.$rootFunction().addResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			checkSave(){
				if(this.nowType == 'add') {
					this.add_type();
				}else if(this.nowType == 'childAdd'){
					this.add_child_type();
				}else if(this.nowType == 'edit') {
					this.edit_type();
				} 
			},
			cancel() {
				this.addOrgPage = false;
				this.name = '';
				this.valueWrap = [];
				this.describes = '';
			},
			getTreeDataCity(data){
				for(var i=0;i<data.length;i++){
					if(data[i].list.length<1){
						data[i].list=undefined;
					}else {
						this.getTreeDataCity(data[i].list);
					}
				}
				return data;
        	}
		},
		components: {
			alert
		},
		mounted(){
			this.getTableList();
			this.$rootFunction().getAllCity();
		},
		watch: {
	      	filterText(val) {
	        	this.$refs.tree.filter(val);
	      	}
	    }
	}
</script>
<style type="text/css">
	.custom-tree-node{width: 220px;}
	.custom-tree-node span{font-size: 14px;}
	.el-tree-node__content{height: 32px!important;}
	.point{float: right;margin-right: 10px;display: none;}
	.custom-tree-node:hover .point{display: block;}
</style>